<template>
    <!-- 工单详情页主容器 -->
    <div>
        <!-- 页面头部组件：显示标题并提供返回功能 -->
        <!-- @back 事件绑定返回上一页的路由操作 -->
        <el-page-header @back="$router.go(-1)" content="工单详情">
        </el-page-header>
        
        <!-- 工单信息标题栏：用于区分页面模块 -->
        <div class="top"
            style="margin-bottom: 10px; margin-top: 15px ;height: 40px;width: 100%;background-color: plum;line-height: 40px;padding-left: 15px;">
            工单信息
        </div>
        
        <!-- 展示列表页传递的对应工单信息 -->
        <!-- 左列：占12格（Element UI栅格系统，共24格） -->
        <el-col :span="12">
            <!-- 表单组件：用于展示工单信息（仅展示不编辑） -->
            <el-form>
                <!-- 表单项：工单编号 -->
                <!-- style设置左内边距，align设置内容居中 -->
                <el-form-item style="padding-left: 10% ;" label="工单编号" align="center">
                    <!-- 显示工单编号，若无数据显示"暂无数据" -->
                    {{ engDetails.serial_number || '暂无数据' }}
                </el-form-item>
            </el-form>
            <el-form>
                <!-- 表单项：工单类型 -->
                <el-form-item style="padding-left: 10% ;" label="工单类型" align="center">
                    {{ engDetails.type || '暂无数据' }}
                </el-form-item>
            </el-form>
        </el-col>
        
        <!-- 右列：占12格 -->
        <el-col :span="12">
            <el-form>
                <!-- 表单项：工单名称 -->
                <el-form-item style="padding-left: 10% ;" label="工单名称" align="center">
                    {{ engDetails.name || '暂无数据' }}
                </el-form-item>
            </el-form>
            <el-form>
                <!-- 表单项：工单状态 -->
                <el-form-item style="padding-left: 10% ;" label="工单状态" align="center">
                    <!-- 使用标签组件展示状态，并根据状态动态设置标签类型（颜色） -->
                    <el-tag :type="getStatusTagType(engDetails.status)">{{ engDetails.status || '暂无数据' }}</el-tag>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</template>

<script>
// 导入请求工具函数（用于接口调用）
import { get } from '@/utils/request'

// 导出Vue组件
export default {
    // 数据对象：存储组件内部状态
    data() {
        return {
            // 存储从列表页接收的工单详情数据
            engDetails: {},
            // 分页参数（可能用于后续扩展的列表查询）
            params: { page: 1, pageSize: 10 }
        }
    },
    
    // 方法集合：定义组件的业务逻辑
    methods: {
        // 工单状态颜色标识（根据状态返回对应的标签类型）
        getStatusTagType(status) {
            // 状态与标签类型的映射关系
            const statusMap = {
                '待接单': 'success',   // 成功状态（绿色）
                '进行中': 'warning',   // 警告状态（黄色）
                '已完成': 'info',      // 信息状态（蓝色）
                '已取消': 'danger'     // 危险状态（红色）
            };
            // 返回对应的标签类型，默认返回'default'（灰色）
            return statusMap[status] || 'default';
        },
        
        // 从接口获取完整的工单详情（可选功能）
        async getWorkorderDetail() {
            try {
                // 调用get请求，传入接口地址和参数（工单id）
                const res = await get('/workorder/findById', { id: this.engDetails.id });
                // 如果请求成功且有数据，更新工单详情
                if (res && res.data) {
                    this.engDetails = res.data;
                }
            } catch (error) {
                // 捕获错误并打印日志
                console.error('获取工单详情失败:', error);
                // 显示错误提示
                this.$message.error('获取详情数据失败');
            }
        }
    },
    
    // 生命周期钩子：组件创建完成后执行
    created() {
        // 1. 接收列表页通过路由参数传递的工单数据
        this.engDetails = this.$route.query || {};
        // 将工单id存入参数对象（可能用于后续接口调用）
        this.params.engineer_id = this.engDetails.id;
        
        // 2. 可选：若路由仅传递id，需调用接口获取完整详情（取消注释即可启用）
        // this.getWorkorderDetail();
    }
}
</script>

<!-- 组件样式：使用scss语法，且仅作用于当前组件 -->
<style lang="scss" scoped>
// 工单信息标题栏样式（会覆盖template中的内联样式，因为scoped样式优先级更高）
.top {
    margin-bottom: 10px;
    margin-top: 15px;
    height: 40px;
    width: 100%;
    background-color: rgb(160, 221, 197);
    line-height: 40px;
    padding-left: 15px;
}

// 深度选择器：修改Element UI标签组件的样式
::v-deep .el-form-item__content .el-tag {
    vertical-align: middle; // 使标签与文字垂直居中对齐
}
</style>